"use client"

import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native"
import { theme } from "../../constants/theme"
import { useState } from "react"
import PhoneticSymbolSheet from "./PhoneticSymbolSheet"

// 元音数据 (Single Vowels)
const VOWELS = [
    {
        symbol: "i:",
        count: 339,
        examples: ["see", "sea", "machine"],
        description: "长元音，发音时舌头抬高，嘴角向两边拉",
    },
    { symbol: "ɪ", count: 1416, examples: ["sit", "busy", "women"], description: "短元音，比i:要短促，发音较为放松" },
    { symbol: "ɜ:", count: 183, examples: ["bird", "word", "journey"], description: "长元音，发音时舌头平放在口腔中部" },
    { symbol: "ə", count: 1940, examples: ["about", "teacher", "picture"], description: "中央元音，发音短促而含糊" },
    { symbol: "ɔ:", count: 288, examples: ["law", "door", "board"], description: "长元音，发音时嘴唇呈圆形" },
    { symbol: "ɒ", count: 386, examples: ["hot", "wash", "quality"], description: "短元音，发音时嘴巴张开，嘴唇稍微圆" },
    { symbol: "ʌ", count: 363, examples: ["cut", "come", "mother"], description: "短元音，发音时嘴巴张开，舌头平放" },
    { symbol: "ʊ", count: 45, examples: ["put", "good", "should"], description: "短元音，发音时嘴唇收圆但不突出" },
    { symbol: "u:", count: 146, examples: ["blue", "food", "group"], description: "长元音，发音时嘴唇向前突出呈圆形" },
    { symbol: "e", count: 727, examples: ["bed", "head", "many"], description: "短元音，发音时嘴巴微微张开" },
    { symbol: "æ", count: 536, examples: ["cat", "bad", "apple"], description: "短元音，发音时嘴巴张开较大" },
    { symbol: "a:", count: 200, examples: ["car", "heart", "father"], description: "长元音，发音时嘴巴张得很大" },
]

// 双元音数据 (Diphthongs)
const DIPHTHONGS = [
    { symbol: "eɪ", count: 542, examples: ["face", "day", "break"], description: "由e滑向ɪ的双元音" },
    { symbol: "aɪ", count: 441, examples: ["price", "high", "try"], description: "由a滑向ɪ的双元音" },
    { symbol: "ɔɪ", count: 40, examples: ["choice", "boy", "royal"], description: "由ɔ滑向ɪ的双元音" },
    { symbol: "əʊ", count: 317, examples: ["goat", "show", "know"], description: "由ə滑向ʊ的双元音" },
    { symbol: "aʊ", count: 155, examples: ["mouth", "now", "house"], description: "由a滑向ʊ的双元音" },
    { symbol: "ɪə", count: 69, examples: ["near", "here", "serious"], description: "由ɪ滑向ə的双元音" },
    { symbol: "eə", count: 79, examples: ["square", "fair", "various"], description: "由e滑向ə的双元音" },
    { symbol: "ʊə", count: 23, examples: ["poor", "tourist", "cure"], description: "由ʊ滑向ə的双元音" },
]

// 辅音数据 (Consonants)
const CONSONANTS = [
    { symbol: "p", count: 839, examples: ["pen", "copy", "happen"], description: "清辅音，双唇爆破音" },
    { symbol: "b", count: 515, examples: ["bad", "baby", "job"], description: "浊辅音，双唇爆破音" },
    { symbol: "t", count: 1565, examples: ["tea", "button", "get"], description: "清辅音，齿龈爆破音" },
    { symbol: "d", count: 830, examples: ["dog", "address", "bed"], description: "浊辅音，齿龈爆破音" },
    { symbol: "k", count: 1178, examples: ["cat", "key", "school"], description: "清辅音，软腭爆破音" },
    { symbol: "g", count: 286, examples: ["get", "giggle", "ghost"], description: "浊辅音，软腭爆破音" },
    { symbol: "f", count: 512, examples: ["fat", "coffee", "phrase"], description: "清辅音，唇齿摩擦音" },
    { symbol: "v", count: 389, examples: ["view", "heavy", "move"], description: "浊辅音，唇齿摩擦音" },
    { symbol: "s", count: 1395, examples: ["soon", "cease", "sister"], description: "清辅音，齿龈摩擦音" },
    { symbol: "z", count: 260, examples: ["zero", "music", "roses"], description: "浊辅音，齿龈摩擦音" },
    { symbol: "θ", count: 113, examples: ["thin", "thumb", "method"], description: "清辅音，齿间摩擦音" },
    { symbol: "ð", count: 67, examples: ["this", "mother", "smooth"], description: "浊辅音，齿间摩擦音" },
    { symbol: "ʃ", count: 322, examples: ["ship", "sure", "emotion"], description: "清辅音，硬腭摩擦音" },
    { symbol: "ʒ", count: 23, examples: ["vision", "leisure", "beige"], description: "浊辅音，硬腭摩擦音" },
    { symbol: "h", count: 195, examples: ["hot", "whole", "ahead"], description: "清辅音，声门摩擦音" },
    { symbol: "r", count: 1367, examples: ["red", "sorry", "arrange"], description: "浊辅音，齿龈近音" },
    { symbol: "tʃ", count: 149, examples: ["chip", "match", "nature"], description: "清辅音，硬腭塞擦音" },
    { symbol: "dʒ", count: 222, examples: ["job", "age", "soldier"], description: "浊辅音，硬腭塞擦音" },
    { symbol: "ts", count: 5, examples: ["cats", "sits", "its"], description: "清辅音，齿龈塞擦音" },
    { symbol: "dz", count: 2, examples: ["beds", "kids", "cards"], description: "浊辅音，齿龈塞擦音" },
    { symbol: "tr", count: 172, examples: ["tree", "train", "central"], description: "清辅音，齿龈塞擦音加近音" },
    { symbol: "dr", count: 38, examples: ["dream", "draw", "hundred"], description: "浊辅音，齿龈塞擦音加近音" },
]

// Add new component for connecting lines
const ConnectingLine = () => (
    <View style={styles.connectingLineContainer}>
        <View style={styles.connectingLine} />
    </View>
)

export default function ClassificationTab() {
    const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null)
    const [selectedType, setSelectedType] = useState<"vowel" | "diphthong" | "consonant" | null>(null)
    const [selectedSymbolData, setSelectedSymbolData] = useState<any>(null)

    const handleSymbolPress = (symbol: string, type: "vowel" | "diphthong" | "consonant") => {
        setSelectedType(type)
        setSelectedSymbol(symbol)

        // Find the symbol data
        let symbolData
        switch (type) {
            case "vowel":
                symbolData = VOWELS.find((v) => v.symbol === symbol)
                break
            case "diphthong":
                symbolData = DIPHTHONGS.find((d) => d.symbol === symbol)
                break
            case "consonant":
                symbolData = CONSONANTS.find((c) => c.symbol === symbol)
                break
        }

        setSelectedSymbolData(symbolData)
    }

    return (
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
            {/* 元音 (Single Vowels) Section */}
            <View style={styles.section}>
                <View style={styles.sectionHeader}>
                    <Text style={styles.sectionTitle}>元音</Text>
                    <View style={styles.subtitleContainer}>
                        <Text style={styles.sectionSubtitle}>长元音</Text>
                        <Text style={styles.sectionSubtitle}>短元音</Text>
                        <Text style={styles.sectionSubtitle}>(20个)</Text>
                    </View>
                </View>

                <View style={styles.phoneticGrid}>
                    {/* First row - Long vowels */}
                    <View style={styles.phoneticColumn}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.pinkItem]}
                            onPress={() => handleSymbolPress("i:", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>i:</Text>
                            <Text style={styles.phoneticCount}>(339)</Text>
                        </TouchableOpacity>
                        <ConnectingLine />
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.whiteItem]}
                            onPress={() => handleSymbolPress("ɪ", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>ɪ</Text>
                            <Text style={styles.phoneticCount}>(1416)</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.phoneticColumn}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.pinkItem]}
                            onPress={() => handleSymbolPress("ɜ:", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>ɜ:</Text>
                            <Text style={styles.phoneticCount}>(183)</Text>
                        </TouchableOpacity>
                        <ConnectingLine />
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.whiteItem]}
                            onPress={() => handleSymbolPress("ə", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>ə</Text>
                            <Text style={styles.phoneticCount}>(1940)</Text>
                        </TouchableOpacity>
                    </View>

                    {/* Continue with other vowel pairs... */}
                    <View style={styles.phoneticColumn}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.pinkItem]}
                            onPress={() => handleSymbolPress("a:", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>a:</Text>
                            <Text style={styles.phoneticCount}>(200)</Text>
                        </TouchableOpacity>
                        <ConnectingLine />
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.whiteItem]}
                            onPress={() => handleSymbolPress("ʌ", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>ʌ</Text>
                            <Text style={styles.phoneticCount}>(363)</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.phoneticColumn}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.pinkItem]}
                            onPress={() => handleSymbolPress("u:", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>u:</Text>
                            <Text style={styles.phoneticCount}>(146)</Text>
                        </TouchableOpacity>
                        <ConnectingLine />
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.whiteItem]}
                            onPress={() => handleSymbolPress("ʊ", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>ʊ</Text>
                            <Text style={styles.phoneticCount}>(45)</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.phoneticColumn}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.pinkItem]}
                            onPress={() => handleSymbolPress("ɔ:", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>ɔ:</Text>
                            <Text style={styles.phoneticCount}>(288)</Text>
                        </TouchableOpacity>
                        <ConnectingLine />
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.whiteItem]}
                            onPress={() => handleSymbolPress("ɒ", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>ɒ</Text>
                            <Text style={styles.phoneticCount}>(386)</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.phoneticColumn}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.pinkItem]}
                            onPress={() => handleSymbolPress("e", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>e</Text>
                            <Text style={styles.phoneticCount}>(727)</Text>
                        </TouchableOpacity>
                        <ConnectingLine />
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.pinkItem]}
                            onPress={() => handleSymbolPress("æ", "vowel")}
                        >
                            <Text style={styles.phoneticSymbol}>æ</Text>
                            <Text style={styles.phoneticCount}>(536)</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>

            {/* 双元音 (Diphthongs) Section */}
            <View style={styles.section}>
                <View style={styles.sectionHeader}>
                    <Text style={styles.sectionTitle}>双元音</Text>
                </View>

                <View style={styles.phoneticGrid}>
                    {/* First row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("eɪ", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>eɪ</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "eɪ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("aɪ", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>aɪ</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "aɪ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("ɔɪ", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>ɔɪ</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "ɔɪ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("əʊ", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>əʊ</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "əʊ")?.count})</Text>
                        </TouchableOpacity>
                    </View>

                    {/* Second row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("aʊ", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>aʊ</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "aʊ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("ɪə", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>ɪə</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "ɪə")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("eə", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>eə</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "eə")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.greenItem]}
                            onPress={() => handleSymbolPress("ʊə", "diphthong")}
                        >
                            <Text style={styles.phoneticSymbol}>ʊə</Text>
                            <Text style={styles.phoneticCount}>({DIPHTHONGS.find((d) => d.symbol === "ʊə")?.count})</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>

            {/* 辅音 (Consonants) Section */}
            <View style={styles.section}>
                <View style={styles.sectionHeader}>
                    <Text style={styles.sectionTitle}>辅音</Text>
                    <View style={styles.subtitleContainer}>
                        <Text style={styles.sectionSubtitle}>清辅音</Text>
                        <Text style={styles.sectionSubtitle}>浊辅音</Text>
                        <Text style={styles.sectionSubtitle}>(28个)</Text>
                    </View>
                </View>

                <View style={styles.phoneticGrid}>
                    {/* First row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("p", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>p</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "p")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("t", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>t</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "t")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("k", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>k</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "k")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("f", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>f</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "f")?.count})</Text>
                        </TouchableOpacity>
                    </View>

                    {/* Second row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("b", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>b</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "b")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("d", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>d</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "d")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("g", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>g</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "g")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("v", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>v</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "v")?.count})</Text>
                        </TouchableOpacity>
                    </View>

                    {/* Third row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("s", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>s</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "s")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("θ", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>θ</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "θ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("ʃ", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>ʃ</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "ʃ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("h", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>h</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "h")?.count})</Text>
                        </TouchableOpacity>
                    </View>

                    {/* Fourth row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("z", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>z</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "z")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("ð", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>ð</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "ð")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("ʒ", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>ʒ</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "ʒ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("r", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>r</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "r")?.count})</Text>
                        </TouchableOpacity>
                    </View>

                    {/* Fifth row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("tʃ", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>tʃ</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "tʃ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("ts", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>ts</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "ts")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.blueItem]}
                            onPress={() => handleSymbolPress("tr", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>tr</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "tr")?.count})</Text>
                        </TouchableOpacity>
                    </View>

                    {/* Sixth row */}
                    <View style={styles.phoneticRow}>
                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("dʒ", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>dʒ</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "dʒ")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("dz", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>dz</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "dz")?.count})</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.phoneticItem, styles.lightBlueItem]}
                            onPress={() => handleSymbolPress("dr", "consonant")}
                        >
                            <Text style={styles.phoneticSymbol}>dr</Text>
                            <Text style={styles.phoneticCount}>({CONSONANTS.find((c) => c.symbol === "dr")?.count})</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>

            {/* Bottom padding */}
            <View style={{ height: 50 }} />

            {/* Phonetic Symbol Detail Sheet */}
            <PhoneticSymbolSheet
                visible={!!selectedSymbol}
                onClose={() => setSelectedSymbol(null)}
                symbol={selectedSymbol || ""}
                type={selectedType || "vowel"}
                symbolData={selectedSymbolData}
            />
        </ScrollView>
    )
}

const styles:any = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    section: {
        marginVertical: theme.spacing.md,
        paddingHorizontal: theme.spacing.lg,
    },
    sectionHeader: {
        marginBottom: theme.spacing.md,
    },
    sectionTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.xs,
    },
    subtitleContainer: {
        flexDirection: "row",
        gap: theme.spacing.md,
    },
    sectionSubtitle: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    phoneticGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "flex-start",
        gap: theme.spacing.xs,
    },
    phoneticRow: {
        flexDirection: "row",
        justifyContent: "flex-start",
        gap: theme.spacing.sm,
        marginBottom: theme.spacing.sm,
        flexWrap: "wrap",
    },
    phoneticItem: {
        width: 60,
        height: 42,
        borderRadius: 12,
        justifyContent: "center",
        alignItems: "center",
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.8,
        shadowRadius: 1,
        elevation: 1,
    },
    connectingLineContainer: {
        height: 15,
        justifyContent: "center",
        alignItems: "center",
    },
    connectingLine: {
        width: 1,
        height: 15,
        backgroundColor: "#E0E0E0",
    },
    pinkItem: {
        backgroundColor: "#FFF5F5",
        borderWidth: 1,
        borderColor: "#FFCDD2",
    },
    whiteItem: {
        backgroundColor: "#FFFFFF",
        borderWidth: 1,
        borderColor: "#FFCDD2",
    },
    greenItem: {
        backgroundColor: "#E8F5E9",
        borderWidth: 1,
        borderColor: "#C8E6C9",
    },
    blueItem: {
        backgroundColor: "#E3F2FD",
        borderWidth: 1,
        borderColor: "#BBDEFB",
    },
    lightBlueItem: {
        backgroundColor: "#FFFFFF",
        borderWidth: 1,
        borderColor: "#BBDEFB",
    },
    phoneticSymbol: {
        fontSize: 16,
        fontWeight: "600",
        color: "#333333",
    },
    phoneticCount: {
        fontSize: 10,
        color: "#757575",
        marginTop: 2,
    },
})

